Computer Graphics Brera : Laboratorio : ❬ ❭

Progetto d'esame

Obiettivo

Sviluppare un metodo di generazione di immagini interattive, o comunque diverse a ogni esecuzione, partendo da una serie di input esterni come, ad esempio, collezioni di dati statistici, informazioni ricavate da servizi online, testi letterari, dati provenienti da sensori, file audio, ecc.. Possono essere usati anche file grafici (bitmap o file vettoriali 2D e 3D) ma i dati devono essere comunque rielaborati e non possono essere semplicemente visualizzati con qualche trasformazione standard.

Il progetto dovrà essere sottoposto al docente e accettato da quest'ultimo in base alla coerenza con gli argomenti del corso e al livello di difficoltà tecnica. Eventuali variazioni rispetto alle specifiche (progetto particolare, lavoro di gruppo, ecc.) dovranno essere comunicate al docente per verificarne l'idoneità.

Il lavoro dovrà inoltre essere accompagnato da una relazione che ne documenti il percorso progettuale secondo le indicazioni riportate più avanti.

Specifiche del lavoro

Il progetto dovrà essere sviluppato in p5.js con l'eventuale aiuto di software di elaborazione dei file di input.

Strumenti

Per lo sketch definitivo o per quelli intermedi (prove tecniche o grafiche) si consiglia di partire dagli sketch di base.

Indicazioni tecniche

Specifiche della relazione

Contenuti  (a titolo puramente indicativo)

Indicazioni tecniche

Non viene richiesto un lavoro grafico particolarmente creativo ma devono essere rispettate almeno alcune regole di base dell'impaginazione. Visto che la visualizzazione avverrà su schermo, l'orientamento delle pagine potrà essere anche orizzontale, evitando però i testi a tutta larghezza.

File da consegnare

La consegna degli sketch p5.js andrà fatta in una cartella Dropbox segnalata per tempo dal docente sul gruppo Facebook delle comunicazioni. All'interno di un file compresso andrà inserita una cartella con il cognome e il nome dello studente o i soli cognomi del gruppo. Una possibile strutturazione dei file potrebbe essere:

  • COGNOME-NOME
    • assets
      • BITMAP.png
      • AUDIO.mp3
      • DATI.json
    • libs
      • p5.min.js
      • p5.dom.min.js
      • p5.sound.min.js
    • index.html
    • sketch.js
    • preview.jpg
    • NOME-PROGETTO.pdf
assets

Cartella con gli eventuali file letti dallo sketch. Evitare di inserire anche i file non necessari al funzionamento del codice.

libs

Cartella con la libreria principale di p5.js (o p5.min.js) ed eventuali altre librerie utilizzate.

index.html

File principale con i riferimenti alle librerie e allo sketch. Nel caso il progetto fosse composto di più lavori, può essere utilizzata una strutturazione a sketch multipli mantenendo comunque lo screenshot e la relazione di progetto nella cartella principale. Con un singolo sketch il codice potrebbe essere:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
        <title>TITOLO DELLO SKETCH</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
            }
            body {
                padding: 0;
                margin: 0;
                background-color: black;  /* colore sfondo pagina */
            }
            canvas {
                display:block;
                position: absolute;
                width: auto !important;
                height: auto !important;
                max-width: 100%;
                max-height: 100%;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%);
            }
            canvas:focus {
                outline:0;
            }
        </style>
        <script src="libs/p5.min.js"></script>  <!-- deve essere il primo -->
        <script src="libs/p5.dom.min.js"></script>
        <script src="libs/p5.sound.min.js"></script>
        <!-- eventuali altre librerie -->
        <script src="sketch.js"></script>       <!-- deve essere l'ultimo -->
    </head>
    <body>
    </body>
</html>
sketch.js

Codice p5.js in cui gli eventuali riferimenti ai file esterni dovranno essere preceduti dal nome della cartella "assets", ad esempio:

...                             
function preload() {
    img = loadImage( "assets/BITMAP.png" );  
    snd = loadSound( "assets/AUDIO.mp3" );  
    dat = loadJSON( "assets/DATI.json" );
    ...  
}
...
preview.jpg

Immagine rappresentativa costituita da uno screenshot/fotogramma della sola area di visualizzazione in un momento significativo.

NOME-PROGETTO.pdf

File della relazione di progetto.

Per ottimizzare le dimensioni dei file, devono essere seguite le indicazioni per l'invio dei file.